import { JsErrorMonitorPlugin } from '@slardar/sdk-web'
import { createMinimalBrowserClient } from '@slardar/web'

/** 反复模拟同一个实例仅加载单个插件时反复初始化和卸载的操作 */
// FIXME: 目前没有很简易的方式模拟这一行为，所以这里其实是不同实例的重复操作，需要等后续能力跟进后修改
let localSlardar: ReturnType<typeof createMinimalBrowserClient>
let count = 0
const triggerInitAndStart = () => {
  localSlardar = createMinimalBrowserClient()
  localSlardar.getSender()?.setSize(Infinity)
  JsErrorMonitorPlugin(localSlardar)
  localSlardar('init', { ...Cypress.env().config, bid: `${Cypress.env().config.bid}${count++}` })
  localSlardar('start')
}

const triggerFlushAndDestroy = () => {
  localSlardar.getSender()?.flush()
  localSlardar('destroy')
}

const triggerError = () => {
  throw Error('error')
}

const triggerError_2 = () => {
  throw Error('error_2')
}

const triggerRejection = () => {
  Promise.reject(Error('reject'))
}

const manuallyReportError = () => {
  localSlardar('captureException', Error('manual'), { a: 'b' })
}

function setTimeoutCb() {
  throw Error('setTimeoutCb')
}
const triggerTimeCbError = () => {
  setTimeout(setTimeoutCb, 0)
}

function rafCb() {
  throw Error('rafCb')
}
const triggerRafCbError = () => {
  requestAnimationFrame(() => {
    rafCb()
  })
}

const triggerXhrCbErrorTwice = () => {
  const xhr = new XMLHttpRequest()
  function onloadCb() {
    throw Error('onload')
  }
  xhr.onload = onloadCb
  xhr.open('get', 'http//localhost:3000')
  xhr.send()
  xhr.open('get', 'http//localhost:3000')
  xhr.send()
}

const triggerEventTargetClick = () => {
  const btn = document.createElement('button')
  const triggerError = () => {
    throw Error('error')
  }
  btn.addEventListener('click', triggerError)
  btn.click()
}

export const JsError = () => {
  return (
    <>
      <button id="js-error-init-and-start" onClick={triggerInitAndStart}>
        js-error-init-and-start
      </button>
      <button id="js-error-flush-and-destroy" onClick={triggerFlushAndDestroy}>
        js-error-flush-and-destroy
      </button>
      <button id="js-error-triggerError" onClick={triggerError}>
        js-error-triggerError
      </button>
      <button id="js-error-triggerError_2" onClick={triggerError_2}>
        js-error-triggerError_2
      </button>
      <button id="js-error-triggerRejection" onClick={triggerRejection}>
        js-error-triggerRejection
      </button>
      <button id="js-error-manuallyReportError" onClick={manuallyReportError}>
        js-error-manuallyReportError"
      </button>
      <button id="js-error-triggerTimeCbError" onClick={triggerTimeCbError}>
        js-error-triggerTimeCbError
      </button>
      <button id="js-error-triggerRafCbError" onClick={triggerRafCbError}>
        js-error-triggerRafCbError
      </button>
      <button id="js-error-triggerXhrCbErrorTwice" onClick={triggerXhrCbErrorTwice}>
        js-error-triggerXhrCbErrorTwice
      </button>
      <button id="js-error-triggerEventTargetClick" onClick={triggerEventTargetClick}>
        js-error-triggerEventTargetClick
      </button>
    </>
  )
}
